<template>
  <view class="mask" catchtouchmove="true">
    <view class="top">
      <view class="navbar">
        <view class="profile">
          <img class="login-img" src="@/static/images/头像@2x.png" alt="">
        </view>
        <view class="icon">
          <img class="camera-icon" src="@/static/images/camera@2x.png" alt="">
        </view>
      </view>
      <view class="bottom">
        <view class="input-box">
          <view class="input-box-top">
            <view class="top-text">昵称</view>
            <input class=" input top-input" type="text" placeholder="请输入昵称">
            <!-- <view class="term" >请输入昵称</view> -->
            <img class="cube-icon" src="@/static/images/cube.png" alt="">
            <view class="rand">随机</view>
          </view>
          <view class="input-box-bottom">
            <view class="age">年龄</view>
            <view class="box">
              <picker class=" input picker" mode="date" @change="onDateChange">
                <view class="date-picker">{{ DateValue }}</view>
              </picker>
              <img src="@/static/images/right.png" class="right-icon" alt="">
            </view>
          </view>
        </view>
        <view class="text">
          <view class="text-left">性别</view>
          <view class="text-right">(注册后不可更改)</view>
        </view>
        <view class="choose-meal">
          <view class="meal meal-left">
            <img src="@/static/images/女1@2x.png" class="woman" alt="">
          </view>
          <view class="meal meal-right">
            <img src="@/static/images/男1@2x.png" class="man" alt="">
          </view>
        </view>
        <view class="text-meal">
          <view class="mealtext left-text-woman">女</view>
          <view class="mealtext right-text-man">男</view>
        </view>
        <view class="next-button" @click="nextpage">下一步</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const DateValue = ref("选择日期")
const onDateChange = (e) => {
  DateValue.value = e.detail.value
  const date = new Date(DateValue.value)
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  DateValue.value = `${year}年${month}月${day}日`
}
const nextpage = () => {
  uni.navigateTo({
    url: '/pages/statu-selection/statu-selection',
  })
}
</script>
<style lang="scss">
.mask {

  // position: relative;
  .top {
    .navbar {
      position: relative;
      width: 750rpx;
      height: 588rpx;
      background: #f2bb16;

      .profile {
        position: absolute;
        top: 112px;
        left: 144px;
        width: 88px;
        height: 88px;
        background: #ffffff;
        border-radius: 50%;

        .login-img {
          margin: 12px 14px 15px 13px;
          width: 61px;
          height: 61px;
        }
      }

      .icon {
        position: absolute;
        top: 172px;
        right: 141px;
        width: 28px;
        height: 28px;
        background: #ffffff;
        border-radius: 50%;

        .camera-icon {
          margin: 5px 4px 6px 5px;
          width: 19px;
          height: 19px;
        }
      }

    }

    .bottom {
      position: absolute;
      top: 542rpx;
      width: 750rpx;
      height: 934rpx;
      background: #fff;
      border-radius: 40rpx 40rpx 0rpx 0rpx;

      .input-box {
        position: relative;

        .input-box-top {
          position: absolute;
          top: 40px;
          left: 100rpx;

          .top-text {
            width: 44px;
            height: 31px;
            // background: #000000;
            font-size: 15px;
            font-family: Inter, Inter-600;
            font-weight: 600;
            text-align: CENTER;
            color: #000000;
            line-height: 35px;

          }

          .top-input {

            ::v-deep .input-placeholder {
              color: #bbbaba !important;
              font-size: 13px !important;
              font-weight: 400 !important;
              margin-left: 10px !important;
            }
          }

          .cube-icon {
            position: absolute;
            width: 15px;
            height: 15px;
            top: 42px;
            right: 52px;
          }

          .rand {
            position: absolute;
            width: 35px;
            height: 15px;
            top: 40px;
            right: 12px;
            font-size: 13px;
            font-family: Inter, Inter-400;
            font-weight: 400;
            text-align: CENTER;
            color: #000000;
            line-height: 16px;
          }
        }

        .input-box-bottom {
          position: absolute;
          top: 110px;
          left: 100rpx;
          width: 100%;

          .age {
            width: 44px;
            height: 31px;
            font-size: 15px;
            font-weight: 700;
            text-align: CENTER;
            color: #000000;
            line-height: 35px;
          }

          .box {
            display: flex;
            position: relative;
            flex-direction: row;
            align-items: center;

            .picker {
              .date-picker {
                width: 150px;
                height: 15px;
                margin-top: 7px;
                margin-left: 10px;
                font-size: 13px;
                // color: #bbbaba;
              }
            }

            .right-icon {
              position: absolute;
              left: 245px;
              width: 15px;
              height: 15px;
            }
          }

          .login-icon {
            position: absolute;
            width: 48rpx;
            height: 48rpx;
            margin-left: 466rpx;
          }

        }

        .input {
          width: 540rpx;
          height: 70rpx;
          // color: #bbbaba;
          padding-left: 10px;
          background: #fffdfd;
          border: 1px solid #c0bfbf;
          border-radius: 20rpx;
          font-size: 26rpx;
          font-weight: 400;
          box-sizing: border-box;
          // text-indent: 10rpx;
          padding-left: 10rpx;
        }

      }
    }
  }

  .text {
    width: 100%;

    .text-left {
      display: inline-block;
      margin-top: 412rpx;
      margin-left: 108rpx;
      width: 44px;
      height: 31px;
      font-size: 15px;
      font-family: Inter, Inter-700;
      font-weight: 700;
      text-align: CENTER;
      color: #000000;
      line-height: 19px;
    }

    .text-right {
      display: inline-block;
      width: 126px;
      height: 15px;
      margin-left: 10px;
      font-size: 11px;
      font-family: Inter, Inter-400;
      font-weight: 400;
      color: #bbbaba;
      line-height: 14px;
    }
  }

  .choose-meal {
    position: relative;
    width: 100%;
    height: 30px;

    .meal {
      width: 63px;
      height: 29px;
      background: #d9d9d9;
      border-radius: 20px;
    }

    .meal-left {
      position: absolute;
      display: inline-block;
      left: 50px;

      .woman {
        width: 25px;
        height: 25px;
        margin: 1px 19px;
      }
    }

    .meal-right {
      position: absolute;
      display: inline-block;
      left: 130px;

      .man {
        width: 25px;
        height: 25px;
        margin: 1px 19px;
      }
    }
  }

  .text-meal {
    position: relative;
    width: 100%;
    height: 17px;

    .mealtext {
      width: 16px;
      height: 17px;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-500;
      font-weight: 500;
      text-align: LEFT;
      color: #949090;
      line-height: 14px;
    }

    .left-text-woman {
      position: absolute;
      display: inline-block;
      top: 8px;
      left: 74px
    }

    .right-text-man {
      position: absolute;
      display: inline-block;
      top: 8px;
      left: 154px
    }

  }

  .next-button {
    margin-top: 94rpx;
    margin-left: 164rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 410rpx;
    height: 70rpx;
    background: #f2bb16;
    border-radius: 40rpx;
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
  }

}
</style>
